<template>
	<!-- 我的订单页面 -->
	<view>
		
		
		<!-- 订单模块 -->
		<view class="order-item"v-for="(item,index) in orderList " :key="index">
			
			<view class="base-info">
				<!-- 时间updateDate -->
				<text>{{item.updateDate}}</text>
				<text>订单号:{{item.orderId}}</text>
			</view>
			
			<course-item
			v-for="(course,index2) in item.courseList"
			:key="index2" :item="course"
			></course-item>
			
			<view class="shifu">
				<text>实付:</text>
				<text>￥{{item.priceDiscount || item.pricePayable}}</text>
			</view>
			
			<view class="option center space-between">
				<!-- 1、待支付 2、交易成功  3、交易关闭 -->
				<!-- 订单状态：1待支付，2交易成功，3交易关闭 -->
				<!-- 
				待支付: 取消订单/立即支付
				交易成功:不显示任何按钮
				交易关闭:显示删除按钮 -->
				<text class="red" v-if="item.status === 1">待支付</text>
				<text class="grey" v-if="item.status === 2">交易成功</text>
				<text class="grey" v-if="item.status === 3">交易关闭</text>
				
				<view>
					<button v-if="item.status === 1" type="default" size="mini" 	@click="orderCancel(item.orderId)">取消订单</button> 
					<button v-if="item.status === 1" type="warn" size="mini" 		@click="orderPay(item)" >立即支付</button>
					<button v-if="item.status === 3" type="default" size="mini"  @click="orderDelete(item.orderId)">删除订单</button>
				</view>
			</view>
			
		</view>
		
		<!-- ios  支付模块  微信小程序 禁止隔层滑动catch -->
		<view v-if="isShow" class="mask" catch @touchmove.stop.prevent="()=>{}"></view>
		<view v-if="isShow" class="bottom-ios" @touchmove.stop.prevent="()=>{}">
			<view class="title center">
				<text>确定支付</text>
				<text>取消</text>
			</view>
			
			<view class="price space-between">
				<text>支付金额</text>
				<text>{{order.priceDiscount || order.pricePayable}}</text>
			</view>
			
			<view class="price space-between">
				<text>当前余额</text>
				<text>{{balance}}</text>
			</view>
			
			<button class="btn"  type="default"
			:loading="loading" :disabled="loading" 
			@click="iosPay"
			>
			{{isPay ? '立即支付' : '余额不足，立即充值'}}
			</button>
		</view>
		
	</view>
</template>

<script>
	import courseItem from '@/components/common/course-item.vue'
	import api  from '@/api/order.js'
	export default {
		components:{courseItem},
		data() {
			return {
				orderList: [], // 订单列表数据
				isShow:false,  //是否显示ios 支付窗口
				isIOS:false,    //是否为APP端的IOS设备
				loading:false,//是否点击了 ios 弹窗中的按钮
				balance:0,  //余额
				order:{}, //立即支付的订单数据
			}
		},
		computed:{
			isPay(){ //余额是否足够支付  对比
				return this.balance >= (this.order.priceDiscount  || this.order.pricePayable)
			}
		},
		onLoad() {
			this.loadData()
			
			// #ifdef APP-PLUS
			//uni.getSystemInfoSync().platform  uniapp 官网 点API查询 设备 系统信息
			//保证ios平台上的app ios android
			this.isIOS = 	uni.getSystemInfoSync().platform === 'ios'
			// #endif
		},
		methods: {
			// 查询用户订单列表
			async loadData() {
				const {data} = await api.getUserOrderList()
				this.orderList = data
			},
			
			// 取消订单
			orderCancel(orderId){
				uni.showModal({
					content:'确定取消该订单记录',
					success:async(res) =>{
						if(res.confirm){  
							const res = await api.cancelOrder(orderId)
							if(res.code === 20000) {
								this.$util.msg('取消成功')
								this.loadData()
							}else{
								this.$util.msg('取消失败，请重试')
							}
						}
						
					}
				})
			},
			// 删除订单
			orderDelete(orderId){
				uni.showModal({
					content:'确定删除该订单记录？',
					success:async(res) =>{
						if(res.confirm){
							const res = await api.deleteOrder(orderId)
							if(res.code === 20000) {
								this.$util.msg('删除')
								//重新查询订单信息
								this.loadData()
							}else{
								this.$util.msg('删除失败,请重试')
							}
						}
					}
				})
			},
			
			// 点击订单列表中的立即支付 按钮
		async	orderPay(order){
				this.order = order
				if(this.isIOS){
					//是app端ios平台  则弹出窗口
					this.showHidePay()
					//查询余额
					this.loading = true 
					const {data } = await 	api.getUserBalance()
					this.balance = data 
					
					this.loading = false
				}else{
					//非app 端 ios 平台 则跳转订单支付页
					const price = this.order.priceDiscount || this.order.pricePayable
					const data = {price, orderId: this.order.orderId}
					this.navTo(`/pages/order/order-pay?params=${ JSON.stringify(data) }`)
				}
				
			},
			//弹窗中点击的按钮
		async	iosPay(){
				const price = this.order.priceDiscount  || this.order.pricePayable
				const  data = {price:price,orderId:this.order.orderId}
				//判断余额是否充足
				if(this.isPay){
						//余额充足 直接支付
						this.loading = true 
						uni.showLoading({
							title:'支付中，请勿离开此页面',
							mask:true   //页面不能点击  
						})
						//支付
					const res = await	api.orderPay(data)
					uni.hideLoading()  //隐藏 uni showLoading
					if(res.code  === 20000){
						//支付成功  关闭弹窗
						this.showHidePay()
						// this.$util.msg('支付成功',{icon:'success'})
						uni.showToast({
							title:'支付成功',
							// icon:'success'
						})
						//刷新订单列表
						this.loading()
					}else{
						uni.showModal({
							content:'支付失败，请重试 ！ 原因' + res.message,
							showCancel:false
						})
					}
				}else{
					//余额不充足 跳转我的余额 进行充值]
					this.navTo(`/pages/order/my-balance? params=${JSON.stringify(data)}`)
				}
			},
			
			//显示窗体
			showHidePay(){
				this.isShow = !this.isShow
			}
			
		}
	}
</script>

<style lang="scss">
	// 订单模块样式
	.order-item{
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom:20rpx;
		font-size:25rpx;
		border-top: .5px solid #efeff4;
		.base-info{
			color: black;
			text:first-child{  //first 第一个元素
				margin-right: 20rpx;
			}
		}
		.shifu{
			text-align: right;
			line-height: 70rpx;
			text:last-child{  //last 最后一个元素
				font-size: 35rpx;
				color: red;
			}
		}
		
		.option{
			button{
				font-size: 20rpx;
				margin-left: 10rpx;
			}
			.red{
				color: red;
			}
			.grey{
				color: grey;
			}
		}
	}
	
	// ios  支付模块样式
	.bottom-ios{
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 30rpx 40rpx;
		border-top: .5px solid #efeff4 ;
		
		.title {
			font-size:  38rpx;
			margin-bottom: 20rpx;
			text-align: center;
			text:first-child{
				flex: 1;
				// background-color: red;
				margin-left: 70rpx;
			}
			text:last-child{
				color: grey;
				font-size: 35rpx;
			}
		}
		.price{
			font-size: 30rpx;
			line-height: 90rpx;
			text:last-child{ 
				color: red;
			}
		}
				
		.btn{
			width: 700rpx;
			background-color: $xg-color-primary;
			color: #FFFFFF;
			border-radius: 50rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			margin-top: 30rpx;
			//插入元素 
			&::after{
				//加载中隐藏边框
				border: none;
			}
		}
	}	
</style>
